<template>
  <div class="container">
    <!-- only show the menu when ready -->
    <ul v-show="uploadedFiles.length > 0">
      <!-- loop through the completed files -->
      <li v-for="file in uploadedFiles">Name: <em>{{ file.name }}</em> Size: <em>{{ file.size | prettyBytes }}</em></li>
    </ul>
    <!-- only show when ready, fileProgress is a percent -->
    <div class="progress-bar" :style="width: {{ fileProgress }}%" v-show="fileProgress > 0"></div>
    <!-- message for all uploads completing -->
    <p v-if="allFilesUploaded"><strong>All Files Uploaded</strong></p>
    <!-- full usage example -->
    <file-upload class="my-file-uploader" name="myFile" id="myCustomId" action="upload.php" multiple>Inside Slot Text
    </file-upload>
    <!-- minimal usage -->
    <file-upload name="anotherFile" action="upload.php"></file-upload>
  </div>
</template>
<style type="text/css" media="screen">
  .progress-bar {
    opacity: 1;
    height: 2px;
    margin: 0.4em 0;
    width: 0;
    background: green;
  }
</style>
<script src="../../../node_modules/vue/dist/vue.js">
  // import Vue from '../../../node_modules/vue/dist/vue.js'
  // Vue.use(fileUpload)
  import fileUpload from 'vue-file-upload-component'
  export default{
    data: function () {
      return {
        uploadedFiles: [], // my list for the v-for
        fileProgress: 0, // global progress
        allFilesUploaded: false // is everything done?
      }
    },
    components: {
      // Vue,
      fileUpload
    },
    events: {
      onFileClick: function (file) {
        console.log('onFileClick', file)
      },
      onFileChange: function (file) {
        console.log('onFileChange', file)
        // here is where we update our view
        this.fileProgress = 0
        this.allFilesUploaded = false
      },
      beforeFileUpload: function (file) {
        // called when the upload handler is called
        console.log('beforeFileUpload', file)
      },
      afterFileUpload: function (file) {
        // called after the xhr.send() at the end of the upload handler
        console.log('afterFileUpload', file)
      },
      onFileProgress: function (progress) {
        console.log('onFileProgress', progress)
        // update our progress bar
        this.fileProgress = progress.percent
      },
      onFileUpload: function (file, res) {
        console.log('onFileUpload', file, res)
        // update our list
        this.uploadedFiles.push(file)
      },
      onFileError: function (file, res) {
        console.error('onFileError', file, res)
      },
      onAllFilesUploaded: function (files) {
        console.log('onAllFilesUploaded', files)
        // everything is done!
        this.allFilesUploaded = true
      }
    }
  }
</script>
